{% load static %}

{% include 'common/header.html' %}


<div class="container parent" style="padding-top:20px;border:1px solid #ff0000; position: relative; /*  关键：父元素需要定位 */">


    <style>
        .parent {

  border: 1px solid black;
  position: relative; /*  关键：父元素需要定位 */
  transform: translate3d(0, 0, 0); /* 关键：触发新的 containing block */
  /* 其他样式，例如背景颜色、边框等等 */
  background-color: lightgray;
}

.child {
  position: fixed;
  top: 10px;
  right: -200px;
  background-color: lightblue;
  padding: 10px;
}
    </style>



<div class="shownav child" style="width:200px;  z-index:999;">

			  <h3 class="wiki-side-title" style="background-color: #1e6887;color:#fff;font-size: 16px;">Browse</h3>
						<ul class="wiki-side-menu">
								<li   >
									<a style="font-size:18px;text-decoration: underline;"  :href="item.path"> 11111<span class="count"></span></a>
								</li>
                            	<li   >
									<a style="font-size:18px;text-decoration: underline;"  :href="item.path"> 11111<span class="count"></span></a>
								</li>
                            	<li   >
									<a style="font-size:18px;text-decoration: underline;"  :href="item.path"> 11111<span class="count"></span></a>
								</li>
                            	<li   >
									<a style="font-size:18px;text-decoration: underline;"  :href="item.path"> 11111<span class="count"></span></a>
								</li>

						</ul>

</div>


<div class=" " style="margin-top: 20px;">




		<div class="panel panel-default">
		<div class="panel-heading" name="panel_head" id="Summary">Summary</div>
		<div class="panel-body" name="summary_panel_body">
		<div class="table-responsive" name="no_response">




<div class="compound-info">
    <div class="compound-header">
        <h2></h2>
    </div>

    <div class="compound-details">
        <div class="compound-image">
            <!-- 化合物结构图的占位符 -->
            <a href="/detail?id={{item.id}}" style=" color:#ff0000;text-decoration: underline">
            <div class="structure-placeholder"></div>
             </a>
              <div class="flex f-j-c  align-center">
                    <div class="flex p15">2D</div>
                    <div class="flex p15">3D</div>
              </div>
        </div>

        <div class="compound-data">
             <div class="data-row">
                 <a href="/detail?id={{item.id}}" style="">
                <span class=" title text-ellipsis-line2"  style=" ">Methylnereistoxin, 1,2-Dithiolan-4-yltrimethylammonium iodide; Nereistoxin methiodide; 19216-75-2; N,N-Dimethyl-1,2-dithiolan-4-amine methiodide</span>
                     </a>
            </div>
            <div class="data-row">
                <span class="label text-bold ">EMNPD ID:</span>
                <span class="value"><a href="/detail?id={{item.id}}" style=" color:#ff0000;text-decoration: underline">EMNPD11</a></span>
            </div>

            <div class="data-row">
                <span class="label text-bold ">Compound CID:</span>
                <span class="value"><a href="{{item.link}}" style=" color:#ff0000;text-decoration: underline">360182</a></span>
            </div>

            <div class="data-row">
                <span class="label text-bold ">Molecular Formula:</span>
                <span class="value">C<sub>5</sub>H<sub>14</sub>NS<sub>2</sub></span>
            </div>

            <div class="data-row">
                <span class="label text-bold ">Molecular Weight:</span>
                <span class="value">291.2g/mol</span>
            </div>

            <div class="data-row">
                <span class="label text-bold " >IUPAC Name:</span>
                <span class="value">N,N-dimethyldithiolan-4-amine</span>
            </div>

            <div class="data-row">
                <span class="label text-bold ">SMILES:</span>
                <span class="value">CN(C)C1CSSC1</span>
            </div>

            <div class="data-row">
                <span class="label text-bold ">InChIKey:</span>
                <span class="value">DSOOGBGKEWZRIH-UHFFFAOYSA-N</span>
            </div>

            <div class="data-row">
                <span class="label text-bold ">InChI:</span>
                <span class="value">InChI=1S/C5H11NS2/c1-6(2)5-3-7-8-4-5/h5H,3-4H2,1-2H3</span>
            </div>

{#            <div class="data-row">#}
{#                <span class="label text-bold ">Similarity:</span>#}
{#                <span class="value" style=" color:#ff0000;">27.4%</span>#}
{#            </div>#}
        </div>
    </div>
</div>


<style>
    .label{
        font-size:13px !important;
        color:#000000 !important;
        padding:0 !important;
    }
.compound-info {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin: 20px;
    background-color: #fff;
}

.compound-header h2 {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.compound-details {
    display: flex;
    gap: 30px;
}

.compound-image {
    flex: 0 0 200px;
}

.structure-placeholder {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
}

.compound-data {
    flex: 1;
}

.data-row {
    {#margin-bottom: 10px;#}
    line-height: 1.5;
}

.label {
    font-weight: bold;
    color: #666;
    margin-right: 10px;
}

.value {
    color: #333;
}
</style>


		</div>

		</div>
		</div>





        <div class="panel panel-default">
        <div class="panel-heading" name="panel_head" id="Calculated_Properties">Names and identifiers</div>
        <div class="panel-body">
<table class="table table-condensed">
		<thead id="thProperties">

		</thead>
		<tbody id="tbProperties">
			<tr><td style="font-weight:bold; vertical-align: middle; width: 150px">SMILES</td><td style="word-wrap:break-word; ">{{item.SMILES}}</td></tr>
			<tr><td style="font-weight:bold; vertical-align: middle; width: 150px">Isomeric SMILES: </td><td style="word-wrap:break-word; ">{{item.Isomeric_SMILES}}</td></tr>
			<tr><td style="font-weight:bold; vertical-align: middle; width: 150px">InChI</td><td style="word-wrap:break-word; ">{{item.InChI}}</td></tr>
			<tr><td style="font-weight:bold; vertical-align: middle; width: 150px">Synonyms</td><td style="word-wrap:break-word; ">{{item.Synonyms}}</td></tr>


		</tbody>
		</table>
        </div>
        </div>


        <div class="panel panel-default">
        <div class="panel-heading" name="panel_head" id="Calculated_Properties">Calculated Properties</div>
        <div class="panel-body">
            <table class="table table-condensed">
            <thead id="thProperties">

            </thead>
            <tbody id="tbProperties">

                  <tr>
                    <th>Molecular Formula:</th>
                    <td>C6H11NS2</td>
                    <th>Molecular Weight:</th>
                    <td>149.3 g/mol</td>
                  </tr>
                  <tr>
                    <th>Charge:</th>
                    <td>0</td>
                    <th>XlogP:</th>
                    <td>0.8</td>
                  </tr>
                  <tr>
                    <th>Exact mass:</th>
                    <td>149.0332917</td>
                    <th>Monoisotopic mass:</th>
                    <td>149.0332917</td>
                  </tr>
                  <tr>
                    <th>Complexity:</th>
                    <td>68.8</td>
                    <th>Rotatable bond number:</th>
                    <td>1</td>
                  </tr>
                  <tr>
                    <th>H-bond donor number:</th>
                    <td>0</td>
                    <th>H-bond acceptor number:</th>
                    <td>3</td>
                  </tr>
                  <tr>
                    <th>Heavy atom number:</th>
                    <td>8</td>
                    <th>Isotope atom number:</th>
                    <td>1</td>
                  </tr>
                  <tr>
                    <th>Atom stereo number:</th>
                    <td>0</td>
                    <th>Defined atom stereo number:</th>
                    <td>3</td>
                  </tr>
                  <tr>
                    <th>Undefined atom stereo count:</th>
                    <td>0</td>
                    <th>Bond stereo count:</th>
                    <td>0</td>
                  </tr>
                  <tr>
                    <th>Defined bond stereo number:</th>
                    <td>0</td>
                    <th>Undefined bond stereo number:</th>
                    <td>1</td>
                  </tr>
                  <tr>
                    <th>Covalent unit number:</th>
                    <td>1</td>
                    <th>Topological polar surface area (TPSA):</th>
                    <td>53.8 (Å²)</td>
                  </tr>




            </tbody>
            </table>


            <table class="table table-condensed">
            <thead id="thProperties">
            </thead>
            <tbody id="tbProperties">
            <tr><td style="font-weight:bold; vertical-align: middle; width: 150px">Atoms</td></tr>
            <tr><td style="vertical-align: middle; ">(1, S), Atom(2, S), Atom(3, N), Atom(4, C), Atom(5, C), Atom(6, C), Atom(7, C), Atom(8, C), Atom(9, H), Atom(10, H), Atom(11, H), Atom(12, H), Atom(13, H), Atom(14, H), Atom(15, H), Atom(16, H), Atom(17, H), Atom(18, H), Atom(19, H)]
            </td></tr>
            </tbody>
            </table>

            <table class="table table-condensed">
            <thead id="thProperties">
            </thead>
            <tbody id="tbProperties">
            <tr><td style="font-weight:bold; vertical-align: middle; width: 150px">Bonds</td></tr>
            <tr> <td colspan="3">Bond(1, 2, 1), Bond(1, 5, 1), Bond(2, 6, 1), Bond(3, 4, 1), Bond(3, 7, 1), Bond(3, 8, 1), Bond(4, 5, 1), Bond(4, 6, 1), Bond(4, 9, 1), Bond(5, 10, 1), Bond(5, 11, 1), Bond(6, 12, 1), Bond(6, 13, 1), Bond(7, 14, 1), Bond(7, 15, 1), Bond(7, 16, 1), Bond(8, 17, 1), Bond(8, 18, 1), Bond(8, 19, 1)]</td>
                 </tr>
            </tbody>
            </table>







        <div class="panel panel-default">
        <div class="panel-heading" name="panel_head" id="Calculated_Properties">Classification</div>
        <div class="panel-body">
   <table class="table table-condensed">
            <thead id="thProperties">

            </thead>
            <tbody id="tbProperties">
                  <tr>
                    <th>Kingdom:</th>
                    <td>C6H11NS2</td>
                    <th>Phylum:</th>
                    <td>149.3 g/mol</td>
                  </tr>
                  <tr>
                    <th>Class:</th>
                    <td>0</td>
                    <th>Order:</th>
                    <td>0.8</td>
                  </tr>
                  <tr>
                    <th>Family:</th>
                    <td>149.0332917</td>
                    <th>Genus:</th>
                    <td>149.0332917</td>
                  </tr>
                  <tr>
                    <th>Species:</th>
                    <td>68.8</td>
                    <th></th>
                    <td></td>
                  </tr>





            </tbody>
            </table>
        </div>
        </div>



        <div class="panel panel-default">
        <div class="panel-heading" name="panel_head" id="Calculated_Properties">Optimization</div>
        <div class="panel-body">
   <table class="table table-condensed">
            <thead id="thProperties">

            </thead>
            <tbody id="tbProperties">

                  <tr>
                    <th>Optimized by:</th>
                    <td>C6H11NS2</td>
                    <th>Force field:</th>
                    <td>149.3 g/mol</td>

                    <td>Mol2   Sdf</td>
                  </tr>

            </tbody>
            </table>
        </div>
        </div>


        <div class="panel panel-default">
        <div class="panel-heading" name="panel_head" id="Calculated_Properties">Targets & Bioactivities</div>
        <div class="panel-body">

        </div>
        </div>


        <div class="panel panel-default">
        <div class="panel-heading" name="panel_head" id="Calculated_Properties">Top 10 Similar Compounds</div>
        <div class="panel-body">

        </div>
        </div>

        <div class="panel panel-default">
        <div class="panel-heading" name="panel_head" id="Calculated_Properties">Top 10 Similar Drugs</div>
        <div class="panel-body">

        </div>
        </div>











	</div>






</div>
<style>
    .mnp-section {
    padding: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

</style>


{% include 'common/footer.html' %}


